<template>
  <div class="updatepass">
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="4">
        <div
          class="grid-content bg-purple"
          style="
            margin-top: 10%;
            margin-left: 10px;
            font-weight: 700;
            font-size: 16px;
            color: rgb(64, 158, 255);
          "
        >
          修改密码
        </div>
      </el-col>
      <el-col :span="8"
        ><div
          class="grid-content bg-purple-light"
          style="margin-top: 30%; margin-left: 10px"
        >
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="原密码" prop="oldPassword">
              <el-input
                type="password"
                v-model.number="ruleForm.oldPassword"
                @blur="validatePassword"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input
                type="password"
                v-model="ruleForm.checkPass"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item style="text-align: center">
              <el-button type="primary" @click="submitForm()">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div></el-col
      >
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>


<script>
import { validatePassword } from "@/api/user";

import { updatePassword } from "@/api/user";
import { logout } from "@/api/user";
export default {
  data() {
    var checkoldPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error("密码不能为空"));
        this.validateFrom.oldPasswordValid = false;
      } else if (!this.validatePassres.result) {
        callback(new Error("密码错误"));
        this.validateFrom.oldPasswordValid = false;
      } else if (this.validatePassres.result) {
        callback();
        this.validateFrom.oldPasswordValid = true;
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
        this.validateFrom.newPassValid = false;
      } else if (/[\u4e00-\u9fa5]/.test(value)) {
        callback(new Error("密码不可为中文"));
        this.validateFrom.newPassValid = false;
      } else if (/\s+/g.test(value)) {
        callback(new Error("密码不可为空格"));
        this.validateFrom.newPassValid = false;
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
        this.validateFrom.newPassValid = true;
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
        this.validateFrom.checkPassValid = false;
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
        this.validateFrom.checkPassValid = false;
      } else {
        callback();
        this.validateFrom.checkPassValid = true;
      }
    };
    return {
      user: {
        userId: 1,
      },
      ruleForm: {
        id: 1,
        pass: "",
        checkPass: "",
        oldPassword: "",
      },
      validateFrom: {
        oldPasswordValid: false,
        newPassValid: false,
        checkPassValid: false,
      },
      validatePassres: {
        result: "",
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        oldPassword: [{ validator: checkoldPassword, trigger: "blur" }],
      },
    };
  },
  methods: {
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    submitForm() {
      if (this.validateFrom.checkPassValid || newPassValid || checkPassValid) {
        updatePassword(this.ruleForm).then((res) => {
          console.log(res)
          
          if (Boolean(res.data)) {
            this.updatesuccess("修改成功！");
            this.logout();
          }
        });
      }else{
        alert("表单不符合规范！")
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    validatePassword() {
      if (this.ruleForm.oldPassword != "") {
        validatePassword(this.ruleForm).then(
          (res) => {
            this.validatePassres.result = res.data;
          }
        );
      }
    },
        //消息提示
    updatesuccess(message) {
      this.$message({
        message: message,
        type: "success",
      });
    },
    async logout() {
      await this.$store.dispatch("user/logout");
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },
   
  },
};
</script>

<style scoped>
.updatepass {
  width: 70%;
  /* background-color: rgb(240, 242, 245); */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  height: 100%;
}

.updatepass .el-row {
  padding: 20px 60px;
}
</style>